<template>
  <div class="box-container">
    <div v-show="slide == true">
      <div class="outer-box" v-if="parts">
        <div
          class="box"
          v-for="(item, index) in parts"
          :key="index"
          :class="
            [
              props.mode=='order'&&fail_parts ? item.serial_no==''? 'missing' : fail_parts[item.stock_code+item.serial_no]?'fail':'pass'
              :
            getPartsStatus(
              item.serial_no,
              item.stock_code,
              item.sw_ver,
              item.hw_ver
            )?.includes('fail')
              ? 'fail'
              : getPartsStatus(
                  item.serial_no,
                  item.stock_code,
                  item.sw_ver,
                  item.hw_ver
                )?.includes('pass')
              ? 'pass'
              : getPartsStatus(
                  item.serial_no,
                  item.stock_code,
                  item.sw_ver,
                  item.hw_ver
                ),
          ]
          "
        >
          <span>
            <div class="ball-container">
              <div class="ball"></div>
              <div class="ball"></div>
            </div>
            <div class="inner-box">
              {{ item.description }}
            </div>
          </span>
          <q-tooltip class="bg-indigo" :offset="[10, 10]">
            <!-- {{
              getPartsStatus(
                item.serial_no,
                item.stock_code,
                item.sw_ver,
                item.hw_ver
              )
            }} -->
            <div class="text-left">
              <div v-if="props.mode=='order'&&fail_parts">
                {{ item.serial_no==''? 'missing' : fail_parts[item.stock_code+item.serial_no]?'fail':'pass' }}
              </div>
            <div v-else v-for="(s, index) in getPartsStatus(
                item.serial_no,
                item.stock_code,
                item.sw_ver,
                item.hw_ver
              )?.split(',')" :key="index">
                {{ s }}
            </div>
          </div>
          </q-tooltip>
          <q-icon
          v-if="props.mode=='part'||props.mode=='order'"
            class="cursor-pointer info-icon"
            name="info"
            color="black"
            size="sm"
            @click="small = true"
          />
        </div>
        <div v-if="Object.keys(parts).length ==0" style="color: #FFF;">
          No childs
        </div>
      </div>
      <StatusDialog v-model="small"></StatusDialog>
    </div>

    <div v-show="slide == false" id="svg-container"></div>

    <div class="fac" v-if="props.mode=='part'||props.mode=='order'">
      <q-btn @click="slideTab" unelevated icon="arrow_back_ios"></q-btn>
      <div class="default-btn text-center" style="padding: 3px">
          {{ slide == true ? props.item.description : props.item.car }}
      </div>
      <q-btn @click="slideTab" unelevated icon="arrow_forward_ios"></q-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import TrainSVG from 'assets/train/train.svg';
import StatusDialog from 'src/components/StatusDialog.vue';
import { Parent, Parts, RepairOrderParts } from 'src/services/type';
import { fetchAssets } from 'src/services/assetsService';
import { getPartsStatus } from '../utils/getPublic';
import { getDepotPartsBySerial } from 'src/services/depotService';
import { getCheckStatus, getOrderParts } from 'src/services/repairService';

const props = defineProps<{
  item: Parts | Parent;
  orderId?: number;
  stockCode?: string;
  mode: 'order' | 'part'|'depot'
}>();
const slide = ref(true);

function slideTab() {
  return (slide.value = !slide.value);
}

/* const parent = ref<Parent>(); */
const parts = ref<RepairOrderParts[]>([]);

async function initPartData() {
  const res = await getDepotPartsBySerial(props.item.serial_no, props.item.stock_code);
 /*  parent.value = res.data as Parent; */
  parts.value = res.data.child
  console.log(parts.value);
}

const fail_parts = ref()

async function initOrderPart() {
  if (props.orderId && props.stockCode) {
    const res = await getOrderParts(props.orderId);
    if (res.data) {
      const arr = res.data.filter((item: any) => {
        return item.stock_code != props.stockCode;
      });
      parts.value = arr;
    }
  }
  const orderStatus = await getCheckStatus(props.orderId);
  fail_parts.value = orderStatus.fail_part
  console.log(fail_parts.value);
}
const small = ref(false);

async function initSvg(svgUrl: string) {
  const res = await fetchAssets(svgUrl);

  const d = document.getElementById('svg-container');

  if (d) {
    d.innerHTML += res.data;
  }
  const svg = document.getElementById('svg');
  if (svg) {
    // svg.style.width = '100%'
    svg.style.width = `-webkit-fill-available`;
    svg.style.paddingRight = `10px`;
    svg.style.height = `80px`;
  }
}

function init(){
  if (props.mode=='part'){
    initPartData();
  }
  if (props.mode=='depot'){
    initPartData();
  }
  if(props.mode=='order'){
    initOrderPart()
  }
}

init();

onMounted(() => {
  initSvg(TrainSVG);
});

function manualUpdate() {
  init();
}

defineExpose({
  manualUpdate,
});
</script>

<style scoped>

::-webkit-scrollbar {
  width: 0.1rem;
}

::-webkit-scrollbar-track {
  background-color: #a5b1a7;
}

.info-icon {
  position: absolute;
  right: 0;
  top: -3rem;
  z-index: 99;
}
</style>
